<template>
  <div class="ZYmain">
    <div class="ziYuanTitle" @click="jumpClick">
      <span>升学讲堂</span>
      <span @click="jumpClick">更多</span>
    </div>
    <div class="ziYuanBox">
      <div class="grid-container">
        <div
          class="grid-item"
          @click="jumpDtail(item)"
          v-for="item in videoData"
          :key="item.id"
        >
          <div class="coverUrl">
            <ProcessedImage
              class="grid_img"
              :src="item.cover"
              :title="item.name"
              params="imageView2/2/w/216/h/144"
              v-if="item.cover"
            />
            <div class="sectionCount">共 {{ strArr(item.videos) }} 讲</div>
          </div>
          <!-- <p class="grid_txt">{{ item.name }}</p> -->
          <div style="padding: 10px">
            <p class="grid_txt">
              <span v-if="item.sign">{{ SIGN_NAME[item.sign] + '-' }}</span>
              <span>{{ item.name }}</span>
            </p>
            <div class="sign_box">
              <p class="grid_txt" style="color: #999">
                {{ item.videoNum ?? 0 }} 播放
              </p>
              <p class="grid_txt" style="color: #e84c34; font-size: 24px">
                <i
                  v-if="item.viewing_permission == 1"
                  class="iconfont icon-mianfei-xianxing"
                ></i>
                <i
                  v-if="item.viewing_permission == 2"
                  class="iconfont icon-VIP"
                ></i>
                <i
                  v-if="item.viewing_permission == 3"
                  class="iconfont icon-menzhenshoufei"
                ></i>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 判断是否会员 -->
  <isVipDialog ref="isVipDialogShow" />
</template>
<script setup>
import isVipDialog from '@/components/Dialog/isVipDialog';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { getToken } from '@/utils/auth';
// import { get } from 'lodash';
const store = useStore();
defineProps({
  videoData: {
    type: Object,
    default: () => ({}), // 设置默认值为空对象
  },
});
const SIGN_NAME = {
  1: '选修',
  2: '必修',
};
const isVipDialogShow = ref(null);
const router = useRouter();
const jumpClick = () => {
  router.push({ path: '/ziYclassrooms' });
};
// const src = require('@/assets/images/1.png');
// 详情
const jumpDtail = (item) => {
  if (!getToken()) {
    router.push({ path: '/login' });
    return;
  }
  //  判断收费是否有试看
  const data = JSON.parse(item.videoSort);
  const isLook = data.some((item) => item.tryLook == true);

  const isVIP = store.getters.user.userInfo.isVIP;
  const { viewing_permission } = item;
  if (!isVIP) {
    if (viewing_permission == 2) {
      isVipDialogShow.value.openDialog();
      return;
    } else if (viewing_permission == 3) {
      if (!item.is_verify) {
        if (isLook) {
          router.push({
            path: '/ziYclassroomsDetail',
            query: { id: item.id, viewing_permission: item.viewing_permission },
          });
          return;
        }
        router.push({
          path: '/zYshopDet',
        });
        return;
      } else {
        router.push({
          path: '/ziYclassroomsDetail',
          query: { id: item.id, viewing_permission: item.viewing_permission },
        });
      }
    } else {
      router.push({
        path: '/ziYclassroomsDetail',
        query: { id: item.id, viewing_permission: item.viewing_permission },
      });
    }
  } else {
    // 这是vip 判断收费是否有试看 isVIP = 3 体验卡 2 升学卡
    const data = JSON.parse(item.videoSort);
    const isLook = data.some((item) => item.tryLook == true);
    // 有试看内容
    if (isLook) {
      router.push({
        path: '/ziYclassroomsDetail',
        query: { id: item.id, viewing_permission: item.viewing_permission },
      });
      return;
    } else if (viewing_permission == 1) {
      router.push({
        path: '/ziYclassroomsDetail',
        query: { id: item.id, viewing_permission: item.viewing_permission },
      });
    } else if (viewing_permission == 3 && item.is_verify) {
      console.log(222222);
      router.push({
        path: '/ziYclassroomsDetail',
        query: { id: item.id, viewing_permission: item.viewing_permission },
      });
    } else if (viewing_permission == 2 && (isVIP == 1 || isVIP == 2)) {
      router.push({
        path: '/ziYclassroomsDetail',
        query: { id: item.id, viewing_permission: item.viewing_permission },
      });
      return;
    } else if (isVIP == 3 && viewing_permission == 2) {
      isVipDialogShow.value.openDialog();
      return;
    } else {
      router.push({
        path: '/zYshopDet',
      });
      return;
    }
  }
  // router.push({
  //   path: '/ziYclassroomsDetail',
  //   query: { id: item.id, viewing_permission: item.viewing_permission },
  // });
};
const strArr = (row) => {
  return row ? row.split(',').length : 0;
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
